<template>
  <div class="main">
    <div class="top-main">
      <dz-nav :is-back="true">
        <template #center>
          <b v-color><qq>My</qq></b>
        </template>
      </dz-nav>
      <div class="box-center">
        <div class="center">
          <dz-avatar @updateAvatar="updateAvatar" :data="form"></dz-avatar>
          <div class="right-icon">
            <img v-if="form.vipImg" :src="form.vipImg" alt="">
            <b>{{ form.vipType }}</b>
          </div>
        </div>
        <div class="user">{{ form.account }}</div>
        <div class="bottom-user">
            <div class="box"><qq>Balance</qq></div>
            <b>{{ form.balance }}</b>
        </div>
      </div>
    </div>

    <div class="menu">
      <dz-menu v-for="(item,index) in menu" :key="index" :item="item"></dz-menu>
    </div>
    <div class="bottom-box">
      <div class="btn" @click="removeSubmit">
        <qq>Logout</qq>
      </div>
    </div>
    <dz-safe></dz-safe>
  </div>
</template>

<script>
  import {getBalance} from "@/api/apiFox";

  export default {
    data(){
      return{
        currentRate:10,
        menu:[
          {id:1,name:this.$t('Recharge'),img:require('@/assets/images/1recharge.png'),path:'/recharge'},
          {id:2,name:this.$t('Withdrawal'),img:require('@/assets/images/1withdrawal.png'),path:'/withdrawal'},
          {id:3,name:this.$t('Wallet'),img:require('@/assets/images/1Walletaddress.png'),path:'/wallet'},
          {id:4,name:this.$t('LoginPassword'),img:require('@/assets/images/1loginpassword.png'),path:'/password'},
          {id:5,name:this.$t('Transactionpassword'),img:require('@/assets/images/1Transaction.png'),path:'/transaction'},
          {id:6,name:this.$t('Invitefriends'),img:require('@/assets/images/1Invitefriends.png'),path:'/invite'},
          {id:7,name:this.$t('TeamSize'),img:require('@/assets/images/1Teamsize.png'),path:'/team'},
          {id:8,name:this.$t('PurchasingRecords'),img:require('@/assets/images/1purshasing.png'),path:'/purchasing'},
          {id:9,name:this.$t('WithdrawalRecord'),img:require('@/assets/images/1Withdrawalrecord.png'),path:'/withdrawalRecord'},
          {id:10,name:this.$t('RevenueDetails'),img:require('@/assets/images/1revenue.png'),path:'/revenue'},
          {id:11,name:this.$t('OnlineService'),img:require('@/assets/images/1service.png'),path:'/service'},
          {id:12,name:this.$t('Downloading'),img:require('@/assets/images/1downloading.png'),path:'/download'},
        ],
        form:{}
      }
    },
    methods:{
      getLists(){
        this.$store.dispatch('getUSerInfo').then(res=>{
          this.form=res
        }).catch(err=>{})
      },

      removeSubmit(){
        this.$store.dispatch('removeLogins')
      },
      updateAvatar(){
        this.getLists()
      }
    },
    mounted() {
      this.getLists()

    }
  }
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  min-height: 100vh;
  background: linear-gradient( 180deg, #FFFADF 0%, #F5BEBE 100%);
  border-radius: 0px 0px 0px 0px;
  .top-main{
    width: 100%;
    height: 220px;
    background: linear-gradient( 180deg, #FFCD82 0%, #D14E7D 100%);
    box-shadow: 0px 4px 4px 0px rgba(160,58,58,0.25);
    border-radius: 0px 0px 30px 30px;
    position: relative;
    .box-center{
      width: 100%;
      height: 150px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      .center{

        width: 200px;
        height: 115px;
        display: flex;
        justify-content: center;
        .right-icon{
          width: 80px;
          height: 150px;
          display: flex;
          align-items: center;
          margin-right: -80px;
          img{
            width: 46px;
            height: 46px;
            object-fit: cover;
          }
          b{
            color: #8721FF;
            font-weight: bold;
            font-size: 16px;
          }
        }
      }
      .user{
        width: 100%;
        text-align: center;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        margin-bottom: 5px;
      }
      .bottom-user{
        width: 297px;
        height: 30px;
        background: #B53A64;
        border-radius: 20px 20px 0px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
        .box{
          width: 60px;
          height: 22px;
          background: rgba(255,255,255,0.2);
          border-radius: 20px 20px 20px 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          color: #FFFFFF;
          font-weight: 600;
        }
        b{
          font-weight: bold;
          font-size: 22px;
          color: #FFFFFF;
          margin-left: 5px;
        }
      }
    }
  }
  .menu{
    width: 100%;
    padding: 20px 14px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .bottom-box{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn{
      width: 343px;
      height: 50px;
      background: linear-gradient( 90deg, #F15D3D 0%, #C3345F 100%);
      box-shadow: 0px 4px 4px 0px rgba(92,18,187,0.25), inset 0px 4px 4px 0px rgba(249,249,249,0.25);
      border-radius: 30px 30px 30px 30px;
      font-weight: bold;
      font-size: 16px;
      color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>